<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-form {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .layui-input {
            height: 38px;
            line-height: 38px;
        }
        .layui-btn {
            width: 100%;
        }
        .verification-code {
            display: flex;
            gap: 10px;
        }
        .verification-code .layui-input {
            flex: 1;
        }
        .verification-code .layui-btn {
            width: 120px;
        }
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱以获得验证码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block verification-code">
                    <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn" id="sendCode">获取验证码</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="repassword" required lay-verify="required|repass" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="enrollForm">立即注册</button>
                    <a href="/user/login" class="layui-btn layui-btn-primary">返回登录</a>
                </div>
            </div>
        </form>
    </div>

    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 自定义验证规则
            form.verify({
                email: function(value){
                    if(!/^[A-Za-z0-9+_.-]+@(.+)$/.test(value)){
                        return '邮箱格式不正确';
                    }
                },
                pass: function(value){
                    if(value.length < 6){
                        return '密码长度不能小于6位';
                    }
                },
                repass: function(value){
                    var password = $('input[name=password]').val();
                    if(value !== password){
                        return '两次输入的密码不一致';
                    }
                }
            });
            
            // 发送验证码
            $('#sendCode').on('click', function(){
                var email = $('input[name=email]').val();
                if(!email){
                    layer.msg('请先输入邮箱');
                    return;
                }
                if(!/^[A-Za-z0-9+_.-]+@(.+)$/.test(email)){
                    layer.msg('邮箱格式不正确');
                    return;
                }
                
                var $btn = $(this);
                $btn.prop('disabled', true);
                
                $.ajax({
                    url: '/user/sendVerificationCode',
                    type: 'POST',
                    data: {email: email},
                    success: function(res){
                        if(res.success){
                            layer.msg(res.msg, {icon: 1});
                            // 倒计时
                            var countdown = 60;
                            var timer = setInterval(function(){
                                if(countdown > 0){
                                    $btn.text(countdown + '秒后重试');
                                    countdown--;
                                } else {
                                    clearInterval(timer);
                                    $btn.prop('disabled', false).text('获取验证码');
                                }
                            }, 1000);
                        } else {
                            layer.msg(res.msg, {icon: 2});
                            $btn.prop('disabled', false);
                        }
                    },
                    error: function(){
                        layer.msg('网络错误，请稍后重试', {icon: 2});
                        $btn.prop('disabled', false);
                    }
                });
            });
            
            // 监听提交
            form.on('submit(enrollForm)', function(data){
                $.ajax({
                    url: '/doEnroll',
                    type: 'POST',
                    data: data.field,
                    success: function(res){
                        if(res.success){
                            layer.msg(res.msg, {icon: 1}, function(){
                                window.location.href = '/user/login';
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },
                    error: function(){
                        layer.msg('网络错误，请稍后重试', {icon: 2});
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>